<template>
    <div class="uploader-list ui flex column item one" style="height: 50vh">
        <div class="t-c p-40 t-sub" v-if="fileList.length < 1 "> 暂无数据</div>
        <div class="uploader-list-title ui flex f-12" v-if="fileList.length > 0 ">
            <div class="item one">
                文件
                <span class="f-12">(总数 : {{ fileList.length }})</span>
                <span class="f-12 m-l-10" v-if="$parent.$parent.uploadNumber">最多可上传 : {{ $parent.$parent.uploadNumber }}</span>
            </div>
            <div class="item " style="width: 100px;">格式</div>
            <div class="item " style="width: 100px;">大小</div>
            <div class="item " style="width: 150px;">状态</div>
            <div class="item " style="width: 70px; text-align:right; padding-right:15px">操作</div>
        </div>
        <template :file-list="fileList">
            <ul class="ui item one scrollbar scroll-no-track scroll-teal">
                <li :class="{nonsupport:file.nonsupport} " v-for="file in fileList" :key="file.id">
                    <uploader-file :file="file" :list="true"></uploader-file>
                </li>
            </ul>
        </template>
    </div>
</template>
<script>
    import UploaderFile from './file.vue'
    import mime from '../common/_mime.js'

    const COMPONENT_NAME = 'uploader-list'

    export default {
        name:COMPONENT_NAME,
        data() {
            return {
                accept: ''
            }
        },
        computed:{
            fileList() {
                let accept = this.$parent.$parent.accept
                let fileList = this.$parent.fileList
                // 给文件名后缀不符合上传规则的加上高亮
                if (accept) {
                  for (let i = 0, len = fileList.length; i < len; i++) {
                      let suffix = fileList[i].name.split('.').pop().toLowerCase()
                      this.$parent.fileList[i].nonsupport = !(accept.indexOf(suffix) > -1)
                  }
                }
                return this.$parent.fileList
            }
        },
        components:{
            UploaderFile
        },

        mounted() {
            this.accept = this.$parent.$parent.accept
        }

    }
</script>
<style lang="scss" scoped>
    .nonsupport{
        background:rgba(#f00, .2);
    }
    .uploader-list{
        position:relative;
    }
    .uploader-list > ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    .uploader-list-title{
        display:none;
        border-bottom:1px #ddd solid;
        > div{
            padding:10px;
            color:#999;
        }
    }
</style>
